<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="../font/iconfont.css">
<script src="js/jquery.js"></script>
<style>
    *{box-sizing: border-box;}
</style>

<div class="nav">
        <style>
            .nav-box{
                width: 100%;
                height: 42px;
                background: #28292b;
            }
            .nav{
                width: 1220px;
                height: 42px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                /* background: lavender; */
            }
            .nav ul{
                width: 1220px;
                display: flex;
                justify-content: space-around;
            }
            .nav ul>li{
                font-size: 11px;
                color: #bdbebe;
            }
            .nav .ldg{
                font-size: 12px;
                font-weight: 700;
                padding: 20px;
                display: flex;
                align-items: center;
            }
            .nav .ldg p{
                margin: 0 20px;
            }
            .nav .ldg p a{
                color: white;
            }
        </style>
        <ul>
            <li><a>在线商城</a></li>
            <li><a>坚果R2</a></li>
            <li><a>Smartisan TNT go</a></li>
            <li><a>坚果TNT工作站</a></li>
            <li><a>Smartisan OS</a></li>
            <li><a>欢喜云</a></li>
            <li><a>应用</a></li>
            <li><a>论坛</a></li>
            <li><a>开发者支持</a></li>
            <li><a>荣誉与奖项</a></li>
            <li><a>加入我们</a></li>
            <li><a>下载APP</a></li>
        </ul>
        <div class="ldg">
            <p><a href="../loading/loading.html">登录</a></p>
            <p><a href="../shopping/shopping.html"><i class="iconfont">&#xe78d;</a></p>
        </div>

</div>

<div class="nav2">
        <style>
            .nav-box2{
                width: 100%;
                height: 74px;
                background: #fff;
                position: sticky;
                top: 0px;
                z-index: 2;
                display: flex;
                align-items: center;
            }
            .nav2{
                width: 1220px;
                /* height: 74px; */
                margin: 0 auto;
                display: flex;
                align-items: center;
                /* background:lightseagreen; */
            }
            .nav2>ul{
                width: 586px;
                display: flex;
                justify-content: space-between;
                margin-right: 304px;
                position: relative;
            }
            .nav2>ul>li>div{
                display: flex;
                position: absolute;
                left: 0;
                background: #ffffff;
            }
            .nav2>ul>li>div>ul{
                width: 800px;
            }
            .nav2>ul>li>div>ul>li{
                height: 120px;
                float: left;
                margin: 20px 50px;
            }
            .nav2>ul>li>div>ul>li>a{
                color: #ccc;
            }
            .nav2 div a{
                color: #28292b;
            }
            .menu3 ul{
                margin-top: 10px;
            }
            .menu3 ul li{
                margin-top: 5px;
            }
            .nav2>ul ul{
                display: none;
            }
            .nav2>ul>li{
                font-size: 12px;
            }
            .nav2>ul>li a{
                color: #4f4f4f;
            }
            .nav2 .search{
                width: 330px;
                height: 36px;
                border: 1px solid #ccc;
                border-radius: 100px;
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex: 1;
            }
            .nav2 .search>input{
                border: none;
            }
            .nav2 .search>span{
                border-radius: 10px;
                font-size: 11px;
                padding: 0 5px;
            }
            .nav2 .search span:nth-of-type(1){
                border: 1px solid #93b2f7;
                background: #e5efff;
                color: #3965cc;
            }
            .nav2 .search span:nth-of-type(2){
                border: 1px solid #b5cc7b;
                background: #f7fae1;
                color: #8aad37;
            }
        </style>
        <ul class="list">
            <li>
                <a href="../index/index.html">首页</a>
                <div class="menu2">
                    <ul>
                        <li>
                            <a href=""><span>手机</span></a>
                            <div class="menu3">
                                <ul>
                                    <a href=""><li>手机</li></a>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href=""><span>官方配件</span></a>
                            <div class="menu3">
                                <ul>
                                    <a href=""><li>数据线</li></a>
                                    <a href=""><li>充电器</li></a>
                                    <a href=""><li>线控耳机</li></a>
                                    <a href=""><li>移动电源</li></a>
                                    <a href=""><li>拍照配件</li></a>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href=""><span>畅呼吸系列</span></a>
                            <div class="menu3">
                                <ul>
                                    <a href=""><li>空气净化器</li></a>
                                    <a href=""><li>生活电器配件</li></a>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href=""><span>服饰箱包</span></a>
                            <div class="menu3">
                                <ul>
                                    <a href=""><li>箱包</li></a>
                                    <a href=""><li>男装</li></a>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a>坚果手机</a>
                <div class="menu2">
                    <ul>
                        <li>
                            <a href=""><span>坚果R2</span></a>
                            <div class="menu3">
                                <ul>
                                    <a href=""><li></li></a>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href=""><span>坚果 Pro 3</span></a>
                            <div class="menu3">
                                <ul>
                                    <a href=""><li></li></a>
                                </ul>
                            </div>
                        </li>

                    </ul>
                </div>
            </li>
            <li><a>TNT</a></li>
            <li><a href="../product_list/product_list.html">官方自营</a></li>
            <li>
                <a>服饰箱包</a>
                <div class="menu2">
                    <ul>
                        <li>
                            <a href=""><span>服饰</span></a>
                            <div class="menu3">
                                <ul>
                                    <a href=""><li>POLO衫</li></a>
                                    <a href=""><li>T恤</li></a>
                                    <a href=""><li>衬衫</li></a>
                                    <a href=""><li>卫衣</li></a>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href=""><span>箱包</span></a>
                            <div class="menu3">
                                <ul>
                                    <a href=""><li>拉杆箱</li></a>
                                    <a href=""><li>包</li></a>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href=""><span>帆布鞋</span></a>
                            <div class="menu3">
                                <ul>
                                    <a href=""><li>拖鞋</li></a>
                                    <a href=""><li>帆布鞋</li></a>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href=""><span>帽子</span></a>
                            <div class="menu3">
                                <ul>
                                    <a href=""><li>空顶帽</li></a>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href=""><span>饰品</span></a>
                            <div class="menu3">
                                <ul>
                                    <a href=""><li>手表</li></a>
                                </ul>
                            </div>
                        </li>

                    </ul>
                </div>
            </li>
            <li><a>大力教育</a></li>
            <li><a>地平线8号</a></li>
            <li><a>服务</a></li>
        </ul>
        <p class="search">
            <i class="iconfont">&#xe637;</i>
            <input type="text">
            <span>坚果R2</span>
            <span>TNT</span>
        </p>
    </div>

<div class="footer">
    <style>
        .footer{
            width: 100%;
            height: 336px;
            background: #fafafa;
            display: flex;
            flex-direction: column;
        }
        .footer .footer-top{
            width: 1220px;
            height: 228px;
            padding-top: 62px;
            margin: 0 auto;
            /* background: lightblue; */
            display: flex;
            justify-content: space-between;
        }
        .footer-top .top-right{
            width: 462px;
            display: flex;
            justify-content: space-between;
            
        }
        .footer-top .top-right  ul{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .footer-top .top-right  h3{
            font-size: 12px;
            color: #646464;
            margin-bottom: 20px;
        }
        .footer-top .top-right  li{
            font-size: 12px;
            line-height: 26px;  
        }
        .footer-top .top-right  li>a{
            color: #969696;
        }
        .footer-top .top-left{
            width: 150px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        .footer-top .top-left h3{
            font-size: 16px;
            font-weight: 900;
            color: #5079d9;
            margin-bottom: 14px;
        }
        .footer-top .top-left article{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            font-size: 12px;
            color: #999999;
            margin-bottom: 10px;
        }
        .footer-top .top-left article p{
            line-height: 18px;
        }
        .footer-top .top-left a{
            width: 132px;
            height: 30px;
            font-size: 12px;
            margin-top: 12px;
            color: #508ce1;
            border: 2px solid #d0d0d0;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .footer-top .top-left .help .a1{
            display: block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background:  #508ce1;
            margin-right: 4px;
            font-weight: 700;
        }
        .footer-top .top-left .help .a1 i{
            color: #ccc;
        }
        .footer-bottom{
            width: 100%;
            height: 110px;
        }
        .footer-bottom .bottom{
            width: 1220px;
            height: 110px;
            margin: 0 auto;
            border-top: 1px solid #ccc;
            /* background: lightgoldenrodyellow; */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .footer-bottom .bottom ul{
            width: 558px;
            font-size: 11px;
            line-height: 11px;
            display: flex;
            justify-content: space-evenly;
            margin-bottom: 12px;
        }
        .footer-bottom .bottom ul a{
            color: #bdbdbd;
        }
        .footer-bottom .bottom .two{
            display: flex;
            justify-content: flex-start;
        }
        .footer-bottom .bottom ul li{
            color: #bdbdbd;
            border-right: 1px solid #bdbdbd;
            padding: 0 10px;
        }
        .footer-bottom .bottom .one li:nth-child(1){
            padding-left: 0;
        }
        .footer-bottom .bottom .one li:nth-child(4){
            border-right: none;
        }
        .footer-bottom .bottom .two li:nth-child(1){
            padding-left: 0;
        }
        .footer-bottom .bottom .two li:nth-child(3){
            border-right: none;
        }
    </style>
    <div class="footer-top">
        <div class="top-right">
            <ul>
                <h3>订单服务</h3>
                <li><a href="">购买指南</a></li>
                <li><a href="">送货政策</a></li>
            </ul>
            <ul>
                <h3>服务支持</h3>
                <li><a href="">零售门店</a></li>
                <li><a href="">自助服务</a></li>
                <li><a href="">维修门店</a></li>
            </ul>
            <ul>
                <h3>媒体中心</h3>
                <li><a href="">新闻动态</a></li>
                <li><a href="">官方视频</a></li>
                <li><a href="">图片资源</a></li>
            </ul>
            <ul>
                <h3>关注我们</h3>
                <li><a href="">新浪微博</a></li>
                <li><a href="">官方微信</a></li>
                <li><a href="">荣誉奖项</a></li>
            </ul>
        </div>
        <div class="top-left">
            <h3>400 - 603 - 5000</h3>
            <article>
                <p>周一到周日 9:00-18:00</p>
                <p>(仅收市话费)</p>
            </article>
            <p class="help">
                <a href="">
                    <span class="a1">
                        <i class="iconfont">&#xe644;</i>
                    </span>
                    <span>在线帮助</span>
                </a>
            </p>
        </div>

    </div>
    <div class="footer-bottom">
        <div class="bottom">
            <ul class="one">
                <li>Copyright &copy; 2020smartisan.com 版权所有</li>
                <li><a href="">锤子商城隐私政策</a></li>
                <li><a href="">锤子商城用户协议</a></li>
                <li><a href="">资质证照</a></li>
            </ul>
            <ul class="two">
                <li><a href="">京ICP备 19048576号 - 1</a></li>
                <li><a href=""><img src="" alt="">京公网安备11010502039854号</a></li>
                <li><a href="">京食药网食备202010031</a></li>
            </ul>
        </div>
    </div>
</div>